// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// SCALE
// =====

// ## Component Scale

$cs = {
  'xxs': .25rem,
  'xs':  .5rem,
  's':   .75rem,
  'm':   1rem,
  'l':   1.5rem,
  'xl':  2rem,
  'xxl': 2.5rem,
  'xl3': 4rem,
}


// ## Layout Scale

$ls = {
  'xs3': .5rem,
  'xxs': 1rem,
  'xs':  1.5rem,
  's':   2rem,
  'm':   3rem,
  'l':   4rem,
  'xl':  6rem,
  'xxl': 10rem,
}



// TYPOGRAPHY
// ==========

// ## Typefaces

$font-family = -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"
$font-family-mono = 'IBM Plex Mono', monospace


// ## Size and spacing

$font-size-base = 14px // Will be set on root element, so 1rem = 14px.
$line-height-base = 1.6786 // ~ 23.5px
$line-height-margin-factor = .3rem // Used for margin calculations on text elements.


// ## Font Scale

$fs = {
  'xs': .75rem, // 10.5px
  's': .857rem, // 12px
  'm': 1rem, // 14px
  'l': 1.25rem, // 17.5px
  'xl': 1.57rem, // ~22px
  'xxl': 1.857rem, // ~26px
  'xl3': 2.285rem, // ~32px
  'xl4': 3rem, // 48px
  'xl5': 3.428rem,
}

// Corresponding default line heights.
$lh = {
  'xs3': 1.2,
  'xxs': 1.4,
  'xs': 1.6,
  's': $line-height-base,
  'm': $line-height-base,
  'l': 1.8,
}

// Font weights for body copy
$fw = {
  'normal': 400,
  'medium': 500,
  'bold': 600, // Prefer this over `bolder`.
  'bolder': 700,
}

// Font weights for headings
$fwh = {
  'normal': 400,
  'bold': 600,
  'bolder': 800,
}


// ## Radius

$br = {
  'xxs': .25rem,
  'xs': .3rem,
  's': .4rem,
  'm': .5rem,
  'l': .75rem,
  'xl': 1rem,
  'xxl': 1.25rem,
  'xl3': 3rem,
}



// BREAKPOINTS
// ===========

// ## The order matters as the breakpoints are used to build responsive
// classes in the grid system. The smaller breakpoints should be first
// to have a slightly higher specificity.

$bp = {
  'xs': 320px,      // Extra small devices
  'sm': 375px,      // Small devices
  'sm-md': 425px,   // Small to medium devices
  'md': 576px,      // Medium devices
  'md-lg': 768px,   // Medium to large devices
  'lg': 992px,      // Large devices
  'lg-xl': 1200px,  // Large to extra-large devices
  'xl': 1460px,     // Extra-large devices
  'xxl': 1600px,    // Double extra-large devices
  'uhd': 1920px,
}


// ANIMATIONS
// ==========

// ## Animation durations, only meant as guidance, usage is not enforced.

$ad = {
  'xs': .05s,
  's': .12s,
  'm': .25s,
  'l': .5s,
  'xl': 1s,
}

// Z-INDEXES
// =========

$zi = {
  'modal': 2020,
  'mobile-menu': 2010,
  'nav': 2000,
  'tooltip': 20,
  'overlay': 10,
  'dropdown': 9,
  'slight': 1,
}


// FORMS
// =====

// Form input widths.

$fiw = {
  '3xs': 3rem,
  'xxs': 5rem,
  'xs': 8rem,
  's': 12rem,
  'm': 30rem,
  'l': 40rem,
  'full': 100%,
}

// Form field widths (container).

$ffw = {
  'xxs': 10rem,
  'xs': 15rem,
  's': 20rem,
  'm': 30rem,
  'l': 40rem,
  'full': 100%,
  'half': 50%,
  'third': 33.33%,
  'quarter': 25%,
}

// Sizes
$sz = {
  '0\.25': '0.0625rem',
  '0\.5': '0.125rem',
  '1': '0.25rem',
  '1\.5': '0.375rem',
  '2': '0.5rem',
  '2\.5': '0.625rem',
  '3': '0.75rem',
  '3\.5': '0.875rem',
  '4': '1rem',
  '5': '1.25rem',
  '6': '1.5rem',
  '7': '1.75rem',
  '8': '2rem',
  '9': '2.25rem',
  '10': '2.5rem',
  '11': '2.75rem',
  '12': '3rem',
  '14': '3.5rem',
  '16': '4rem',
  '20': '5rem',
  '24': '6rem',
  '28': '7rem',
  '32': '8rem',
  '36': '9rem',
  '40': '10rem',
  '44': '11rem',
  '48': '12rem',
  '52': '13rem',
  '56': '14rem',
  '60': '15rem',
  '64': '16rem',
  '72': '18rem',
  '80': '20rem',
  '96': '24rem',
}

// MISCELLANEOUS
// =============

$header-height = 4rem
$header-height-mobile = 4rem
$footer-height = 3rem
$sidebar-width = 20rem
$sidebar-width-minimized = 3rem
$sidebar-mobile-menu-height = 3rem
$breadcrumbs-bar-height = 3rem
$default-input-height = 2.5rem

$grid-column-gap = $ls.xxs
$grid-row-gap = $ls.xxs
